import { SendOutlined, UserOutlined } from '@ant-design/icons';
import {
    DrawerForm,
    ProCard,
    ProFormCascader,
    ProFormGroup,
    ProFormList,
    ProFormText,
} from '@ant-design/pro-components';
import { Button, Cascader, Form, message } from 'antd';
import FormItem from 'antd/es/form/FormItem';
import { useRef, useState } from 'react';
import UploadDragger from './UploadDragger';
import { recordInitOrganizationOption, saveRegistration } from '@/services/api/api-interview-record';
import { FormListActionType } from '@ant-design/pro-form';

interface EnrollOrganizationProps {
    onRefurbish: () => void;
    detailRegistData: InterviewRecordData.assignOrganizationList;
    id: string
}
const EnrollOrganization: React.FC<EnrollOrganizationProps> = ({ onRefurbish, id, detailRegistData }) => {
    const assignOrganizationRef = useRef<FormListActionType<{ name: string; }>>();

    return (
        <DrawerForm
            title="报名"
            trigger={
                <Button type="primary" style={{
                    background: '#87d068',
                }}>
                    <SendOutlined />
                    报名
                </Button>
            }
            autoFocusFirstInput
            drawerProps={{
                destroyOnClose: true,
                width: '100%'
            }}
            onVisibleChange={(visible) => {
                if (visible) {
                } else {
                    onRefurbish()
                }
            }}
            submitTimeout={2000}
            onFinish={async (values) => {

                const res = await saveRegistration({
                    recordId: id,
                    personnelInformation: values.organizationList,
                    attribute: 2
                })
                if (res.code === 0) {
                    message.success('提交成功');
                    return true;
                } else {
                    message.error("提交失败")
                    return false;
                }
            }}
            layout="horizontal"
        >
            <ProFormList
                min={1}
                name="organizationList"
                creatorButtonProps={false}
                actionRef={assignOrganizationRef}
                label={<div style={{ display: 'flex', justifyContent: 'space-between', width: '100vw' }}>
                    <span style={{ fontSize: 18 }}><UserOutlined style={{ marginRight: 5 }} />采访对象</span>
                    <Button
                        type="primary"
                        style={{ display: 'flex', justifyContent: 'flex-end' }}
                        onClick={() => {
                            assignOrganizationRef.current?.add({
                                name: '',
                            });
                        }}
                    >
                        添加采访对象
                    </Button>
                </div>}
                initialValue={Array.isArray(detailRegistData?.personnelInformations) && detailRegistData?.personnelInformations.length > 0 ? detailRegistData?.personnelInformations : [
                    {
                        name: '',
                    },
                ]}

            >
                <ProFormGroup key="group"  >
                    <ProFormText name="name" label="姓名" placeholder="请输入姓名"/>
                    <ProFormText
                        name="phone"
                        label="电话"
                         placeholder="请输入电话"
                        rules={[
                            {
                                pattern: /^1[3|4|5|7|8][0-9]\d{8}$/,
                                message: '请输入正确的手机号'
                            }
                        ]}
                    />
                </ProFormGroup>

            </ProFormList>
            <FormItem
                name="articleAttachments"
                label="相关素材"
            >
                <UploadDragger
                    onPreview={(file) => { }}
                    access={{
                        isPicture: true,
                        isVideo: true,
                        isOffice: true,
                        isOther: true,
                    }}
                    url="/interview/attachment/save"
                />
            </FormItem>
        </DrawerForm >
    );
};

export default EnrollOrganization;